<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">

<head>

<!-- Basic -->
<meta charset="UTF-8" />

<title>更新用户信息</title>

<!-- Mobile Metas -->
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<!-- Import google fonts -->
<link
	href="http://fonts.useso.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light"
	rel="stylesheet" type="text/css" />

<!-- Favicon and touch icons -->
<link rel="shortcut icon" href="<%=path%>/assets/ico/favicon.ico"
	type="image/x-icon" />
<link rel="apple-touch-icon"
	href="<%=path%>/assets/ico/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57"
	href="<%=path%>/assets/ico/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72"
	href="<%=path%>/assets/ico/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76"
	href="<%=path%>/assets/ico/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114"
	href="<%=path%>/assets/ico/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120"
	href="<%=path%>/assets/ico/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144"
	href="<%=path%>/assets/ico/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152"
	href="<%=path%>/assets/ico/apple-touch-icon-152x152.png" />

<!-- start: CSS file-->

<!-- Vendor CSS-->
<link href="<%=path%>/assets/vendor/bootstrap/css/bootstrap.min.css"
	rel="stylesheet" />
<link href="<%=path%>/assets/vendor/skycons/css/skycons.css"
	rel="stylesheet" />
<link
	href="<%=path%>/assets/vendor/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" />

<!-- Plugins CSS-->
<link href="<%=path%>/assets/plugins/bootkit/css/bootkit.css"
	rel="stylesheet" />
<link
	href="<%=path%>/assets/plugins/jquery-ui/css/jquery-ui-1.10.4.min.css"
	rel="stylesheet" />
<link
	href="<%=path%>/assets/plugins/editable/css/bootstrap-editable.css"
	rel="stylesheet" />

<!-- Theme CSS -->
<link href="<%=path%>/assets/css/jquery.mmenu.css" rel="stylesheet" />

<!-- Page CSS -->
<link href="<%=path%>/assets/css/style.css" rel="stylesheet" />
<link href="<%=path%>/assets/css/add-ons.min.css" rel="stylesheet" />

<!-- end: CSS file-->


<!-- Head Libs -->
<script src="<%=path%>/assets/plugins/modernizr/js/modernizr.js"></script>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->

<base href="<%=basePath%>">

<!-- 判断上传的文件是否是图片 -->
<script type="text/javascript">
	//判断上传文件格式是否满足条件
	function checkFileType() {
		var f = document.getElementsByName("file")[0].value;
		if (f == "") {
			alert("请上传图片");
			return false;
		} else {
			if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(f)) {
				alert("图片类型必须是.gif,jpeg,jpg,png中的一种")
				return false;
			}
		}
	}
	//判断email格式
	function checkEmail() {
		var email = document.getElementsByName("email")[0].value;
		//alert(email);
		if (!isEmail(email)) {
			alert("邮件格式不正确，请重新输入");
			return false;
		}
	}
	function isEmail(str) {
		var reg = /[a-z0-9-]{1,30}@[a-z0-9-]{1,65}.[a-z]{3}/;
		return reg.test(str);
	}
	function checkpass() {
		var pwd = document.getElementsByName("password")[0].value;

		if (pwd.length<6 || pwd.length >15) {
			alert("密码长度须在6-15之间!");
			return false;
		}
	}
	function checkuser() {
		var pwd = document.getElementsByName("username")[0].value;

		if (pwd.length<3 || pwd.length >15) {
			alert("用户名长度须在3-15之间!");
			return false;
		}
	}
</script>
</head>

<body>
	<!-- Start: Content -->
	<div class="container-fluid content">
		<div class="row">

			<!-- 加载header -->
			<jsp:include page="include/header.jsp"></jsp:include>
			<!-- 加载sidebar -->
			<jsp:include page="include/sidebar.jsp"></jsp:include>

			<!-- Main Page -->
			<div class="main ">
				<!-- Page Header -->
				<div class="page-header">
					<div class="pull-left">
						<ol class="breadcrumb visible-sm visible-md visible-lg">
							<li><a href="<%=path%>/user/index"><i
									class="icon fa fa-home"></i>首页</a></li>
							<li><a href="<%=path%>/user/userProfile"><i
									class="fa fa-list-alt"></i>用户信息管理</a></li>
							<li class="active"><i class="fa fa-pencil"></i>用户信息更新</li>
						</ol>
					</div>
				</div>
				<!-- End Page Header -->
				<div class="row">
					<div class="col-lg-12">
						<div class="panel bk-bg-white">
							<div class="panel-heading bk-bg-primary">
								<h6>
									<i class="fa fa-pencil red"></i>更新用户名
								</h6>
								<div class="panel-actions">
									<a href="form-x-editable.html#" class="btn-minimize"><i
										class="fa fa-chevron-up"></i></a>
								</div>
							</div>
							<div class="panel-body">
								<form action="<%=path%>/user/updateUserName"
									name="updateUserNameForm" id="userNameForm">
									<input type="submit" name="submit" value="确认"
										onClick="return checkuser()"> <span style="color: red">${requestScope.errorName}</span>
									<span style="color: green">${requestScope.succeedName}</span>
									<table id="user" class="table table-bordered table-striped"
										style="clear: both">
										<thead>
											<tr>
												<td>属性</td>
												<td>原始值</td>
												<td>修改值</td>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td width="30%">用户名</td>
												<td width="35">${sessionScope.user.userName}</td>
												<td width="35%"><input type="text" name="username" /></td>

											</tr>
										</tbody>
									</table>
								</form>
							</div>

						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-lg-12">
						<div class="panel bk-bg-white">
							<div class="panel-heading bk-bg-primary">
								<h6>
									<i class="fa fa-pencil red"></i>更新密码
								</h6>
								<div class="panel-actions">
									<a href="form-x-editable.html#" class="btn-minimize"><i
										class="fa fa-chevron-up"></i></a>
								</div>
							</div>
							<div class="panel-body">
								<form action="<%=path%>/user/updateUserPassword"
									name="updateUserPasswordForm" id="userPasswordForm">
									<input type="submit" name="submit" value="确认"
										onClick="return checkpass()"> <span style="color: red">${requestScope.errorPassword}</span>
									<span style="color: green">${requestScope.succeedPassword}</span>
									<table id="user" class="table table-bordered table-striped"
										style="clear: both">
										<thead>
											<tr>
												<td>属性</td>
												<td>原始值</td>
												<td>修改值</td>
											</tr>
										</thead>

										<tbody>
											<tr>
												<td width="30%">密码</td>
												<td width="35%">**************</td>
												<td width="35%"><input type="password" name="password"></td>
											</tr>
										</tbody>
									</table>
								</form>
							</div>

						</div>
					</div>
				</div>

				<div class="row">
					<div class="col-lg-12">
						<div class="panel bk-bg-white">
							<div class="panel-heading bk-bg-primary">
								<h6>
									<i class="fa fa-pencil red"></i>更新邮箱
								</h6>
								<div class="panel-actions">
									<a href="form-x-editable.html#" class="btn-minimize"><i
										class="fa fa-chevron-up"></i></a>
								</div>
							</div>
							<div class="panel-body">
								<form action="<%=path%>/user/updateUserEmail"
									name="updateUserEmailForm" id="userEmailForm">
									<input type="submit" name="submit" value="确认"
										onClick="return checkEmail()"> <span
										style="color: red">${requestScope.errorEmail}</span> <span
										style="color: green">${requestScope.succeedEmail}</span>
									<table id="user" class="table table-bordered table-striped"
										style="clear: both">
										<thead>
											<tr>
												<td>属性</td>
												<td>原始值</td>
												<td>修改值</td>
											</tr>
										</thead>

										<tbody>
											<tr>
												<td width="30%">邮箱</td>
												<td width="35%">${sessionScope.user.email}</td>
												<td width="35%"><input type="text" name="email"></td>
											</tr>
										</tbody>
									</table>
								</form>
							</div>

						</div>
					</div>


				</div>

				<div class="row">
					<div class="col-lg-12">
						<div class="panel bk-bg-white">
							<div class="panel-heading bk-bg-primary">
								<h6>
									<i class="fa fa-pencil red"></i>更新头像
								</h6>
								<div class="panel-actions">
									<a href="form-x-editable.html#" class="btn-minimize"><i
										class="fa fa-chevron-up"></i></a>
								</div>
							</div>
							<div class="panel-body">
								<form action="<%=path%>/user/updateUserAvartar"
									name="updateUserAvartarForm" id="userAvartarForm" method="post"
									enctype="multipart/form-data">
									<input type="submit" name="submit" value="确认"
										onClick="return checkFileType()"> <span
										style="color: red">${requestScope.errorAvartar}</span> <span
										style="color: green">${requestScope.succeedAvartar}</span>
									<table id="user" class="table table-bordered table-striped"
										style="clear: both">
										<thead>
											<tr>
												<td>属性</td>
												<td>原始值</td>
												<td>修改值</td>
											</tr>
										</thead>

										<tbody>
											<tr>
												<td width="30%">头像</td>
												<td width="35%"><img src="${sessionScope.user.avartar}"
													class="img-circle bk-img-60" alt="" /></td>
												<td width="35%"><input type="file" name="file"></td>
											</tr>
										</tbody>
									</table>
								</form>
							</div>

						</div>
					</div>


				</div>
				<!-- End Main Page -->
			</div>
		</div>
		<!--/container-->


		<div class="clearfix"></div>


		<!-- start: JavaScript-->

		<!-- Vendor JS-->
		<script src="<%=path%>/assets/vendor/js/jquery.min.js"></script>
		<script src="<%=path%>/assets/vendor/js/jquery-2.1.1.min.js"></script>
		<script src="<%=path%>/assets/vendor/js/jquery-migrate-1.2.1.min.js"></script>
		<script src="<%=path%>/assets/vendor/bootstrap/js/bootstrap.min.js"></script>
		<script src="<%=path%>/assets/vendor/skycons/js/skycons.js"></script>

		<!-- Plugins JS-->
		<script
			src="<%=path%>/assets/plugins/jquery-ui/js/jquery-ui-1.10.4.min.js"></script>
		<script
			src="<%=path%>/assets/plugins/mockjax/js/jquery.mockjax.min.js"></script>
		<script
			src="<%=path%>/assets/plugins/editable/js/bootstrap-editable.min.js"></script>
		<script src="<%=path%>/assets/plugins/moment/js/moment.min.js"></script>
		<script
			src="<%=path%>/assets/plugins/editable/inputs-ext/typeaheadjs/typeaheadjs.min.js"></script>
		<script
			src="<%=path%>/assets/plugins/editable/inputs-ext/address/address.min.js"></script>
		<script src="<%=path%>/assets/plugins/select2/js/select2.min.js"></script>

		<!-- Theme JS -->
		<script src="<%=path%>/assets/js/jquery.mmenu.min.js"></script>
		<script src="<%=path%>/assets/js/core.min.js"></script>

		<!-- Pages JS -->
		<script src="<%=path%>/assets/js/pages/form-x-editable-demo.js"></script>
		<script src="<%=path%>/assets/js/pages/form-x-editable.js"></script>

		<!-- end: JavaScript-->
</body>

</html>